<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Icons example</title>

    <!-- Photon.css -->
    <link rel="stylesheet" href="/dist/css/photon.css">
  </head>

  <style>
  .icon {
    margin-right: 5px;
    margin-left: 5px;
    font-size: 20px;
    color: #666;
  }
  </style>
  <body>
    <div class="icon-examples">
      <span class="icon icon-note"></span>
      <span class="icon icon-note-beamed"></span>
      <span class="icon icon-music"></span>
      <span class="icon icon-search"></span>
      <span class="icon icon-flashlight"></span>
      <span class="icon icon-mail"></span>
      <span class="icon icon-heart"></span>
      <span class="icon icon-heart-empty"></span>
      <span class="icon icon-star"></span>
      <span class="icon icon-star-empty"></span>
      <span class="icon icon-user"></span>
      <span class="icon icon-users"></span>
      <span class="icon icon-user-add"></span>
      <span class="icon icon-video"></span>
      <span class="icon icon-picture"></span>
      <span class="icon icon-camera"></span>
      <span class="icon icon-layout"></span>
      <span class="icon icon-menu"></span>
      <span class="icon icon-check"></span>
      <span class="icon icon-cancel"></span>
      <span class="icon icon-cancel-circled"></span>
      <span class="icon icon-cancel-squared"></span>
      <span class="icon icon-plus"></span>
      <span class="icon icon-plus-circled"></span>
      <span class="icon icon-plus-squared"></span>
      <span class="icon icon-minus"></span>
      <span class="icon icon-minus-circled"></span>
      <span class="icon icon-minus-squared"></span>
      <span class="icon icon-help"></span>
      <span class="icon icon-help-circled"></span>
      <span class="icon icon-info"></span>
      <span class="icon icon-info-circled"></span>
      <span class="icon icon-back"></span>
      <span class="icon icon-home"></span>
      <span class="icon icon-link"></span>
      <span class="icon icon-attach"></span>
      <span class="icon icon-lock"></span>
      <span class="icon icon-lock-open"></span>
      <span class="icon icon-eye"></span>
      <span class="icon icon-tag"></span>
      <span class="icon icon-bookmark"></span>
      <span class="icon icon-bookmarks"></span>
      <span class="icon icon-flag"></span>
      <span class="icon icon-thumbs-up"></span>
      <span class="icon icon-thumbs-down"></span>
      <span class="icon icon-download"></span>
      <span class="icon icon-upload"></span>
      <span class="icon icon-upload-cloud"></span>
      <span class="icon icon-reply"></span>
      <span class="icon icon-reply-all"></span>
      <span class="icon icon-forward"></span>
      <span class="icon icon-quote"></span>
      <span class="icon icon-code"></span>
      <span class="icon icon-export"></span>
      <span class="icon icon-pencil"></span>
      <span class="icon icon-feather"></span>
      <span class="icon icon-print"></span>
      <span class="icon icon-retweet"></span>
      <span class="icon icon-keyboard"></span>
      <span class="icon icon-comment"></span>
      <span class="icon icon-chat"></span>
      <span class="icon icon-bell"></span>
      <span class="icon icon-attention"></span>
      <span class="icon icon-alert"></span>
      <span class="icon icon-vcard"></span>
      <span class="icon icon-address"></span>
      <span class="icon icon-location"></span>
      <span class="icon icon-map"></span>
      <span class="icon icon-direction"></span>
      <span class="icon icon-compass"></span>
      <span class="icon icon-cup"></span>
      <span class="icon icon-trash"></span>
      <span class="icon icon-doc"></span>
      <span class="icon icon-docs"></span>
      <span class="icon icon-doc-landscape"></span>
      <span class="icon icon-doc-text"></span>
      <span class="icon icon-doc-text-inv"></span>
      <span class="icon icon-newspaper"></span>
      <span class="icon icon-book-open"></span>
      <span class="icon icon-book"></span>
      <span class="icon icon-folder"></span>
      <span class="icon icon-archive"></span>
      <span class="icon icon-box"></span>
      <span class="icon icon-rss"></span>
      <span class="icon icon-phone"></span>
      <span class="icon icon-cog"></span>
      <span class="icon icon-tools"></span>
      <span class="icon icon-share"></span>
      <span class="icon icon-shareable"></span>
      <span class="icon icon-basket"></span>
      <span class="icon icon-bag"></span>
      <span class="icon icon-calendar"></span>
      <span class="icon icon-login"></span>
      <span class="icon icon-logout"></span>
      <span class="icon icon-mic"></span>
      <span class="icon icon-mute"></span>
      <span class="icon icon-sound"></span>
      <span class="icon icon-volume"></span>
      <span class="icon icon-clock"></span>
      <span class="icon icon-hourglass"></span>
      <span class="icon icon-lamp"></span>
      <span class="icon icon-light-down"></span>
      <span class="icon icon-light-up"></span>
      <span class="icon icon-adjust"></span>
      <span class="icon icon-block"></span>
      <span class="icon icon-resize-full"></span>
      <span class="icon icon-resize-small"></span>
      <span class="icon icon-popup"></span>
      <span class="icon icon-publish"></span>
      <span class="icon icon-window"></span>
      <span class="icon icon-arrow-combo"></span>
      <span class="icon icon-down-circled"></span>
      <span class="icon icon-left-circled"></span>
      <span class="icon icon-right-circled"></span>
      <span class="icon icon-up-circled"></span>
      <span class="icon icon-down-open"></span>
      <span class="icon icon-left-open"></span>
      <span class="icon icon-right-open"></span>
      <span class="icon icon-up-open"></span>
      <span class="icon icon-down-open-mini"></span>
      <span class="icon icon-left-open-mini"></span>
      <span class="icon icon-right-open-mini"></span>
      <span class="icon icon-up-open-mini"></span>
      <span class="icon icon-down-open-big"></span>
      <span class="icon icon-left-open-big"></span>
      <span class="icon icon-right-open-big"></span>
      <span class="icon icon-up-open-big"></span>
      <span class="icon icon-down"></span>
      <span class="icon icon-left"></span>
      <span class="icon icon-right"></span>
      <span class="icon icon-up"></span>
      <span class="icon icon-down-dir"></span>
      <span class="icon icon-left-dir"></span>
      <span class="icon icon-right-dir"></span>
      <span class="icon icon-up-dir"></span>
      <span class="icon icon-down-bold"></span>
      <span class="icon icon-left-bold"></span>
      <span class="icon icon-right-bold"></span>
      <span class="icon icon-up-bold"></span>
      <span class="icon icon-down-thin"></span>
      <span class="icon icon-left-thin"></span>
      <span class="icon icon-right-thin"></span>
      <span class="icon icon-up-thin"></span>
      <span class="icon icon-ccw"></span>
      <span class="icon icon-cw"></span>
      <span class="icon icon-arrows-ccw"></span>
      <span class="icon icon-level-down"></span>
      <span class="icon icon-level-up"></span>
      <span class="icon icon-shuffle"></span>
      <span class="icon icon-loop"></span>
      <span class="icon icon-switch"></span>
      <span class="icon icon-play"></span>
      <span class="icon icon-stop"></span>
      <span class="icon icon-pause"></span>
      <span class="icon icon-record"></span>
      <span class="icon icon-to-end"></span>
      <span class="icon icon-to-start"></span>
      <span class="icon icon-fast-forward"></span>
      <span class="icon icon-fast-backward"></span>
      <span class="icon icon-progress-0"></span>
      <span class="icon icon-progress-1"></span>
      <span class="icon icon-progress-2"></span>
      <span class="icon icon-progress-3"></span>
      <span class="icon icon-target"></span>
      <span class="icon icon-palette"></span>
      <span class="icon icon-list"></span>
      <span class="icon icon-list-add"></span>
      <span class="icon icon-signal"></span>
      <span class="icon icon-trophy"></span>
      <span class="icon icon-battery"></span>
      <span class="icon icon-back-in-time"></span>
      <span class="icon icon-monitor"></span>
      <span class="icon icon-mobile"></span>
      <span class="icon icon-network"></span>
      <span class="icon icon-cd"></span>
      <span class="icon icon-inbox"></span>
      <span class="icon icon-install"></span>
      <span class="icon icon-globe"></span>
      <span class="icon icon-cloud"></span>
      <span class="icon icon-cloud-thunder"></span>
      <span class="icon icon-flash"></span>
      <span class="icon icon-moon"></span>
      <span class="icon icon-flight"></span>
      <span class="icon icon-paper-plane"></span>
      <span class="icon icon-leaf"></span>
      <span class="icon icon-lifebuoy"></span>
      <span class="icon icon-mouse"></span>
      <span class="icon icon-briefcase"></span>
      <span class="icon icon-suitcase"></span>
      <span class="icon icon-dot"></span>
      <span class="icon icon-dot-2"></span>
      <span class="icon icon-dot-3"></span>
      <span class="icon icon-brush"></span>
      <span class="icon icon-magnet"></span>
      <span class="icon icon-infinity"></span>
      <span class="icon icon-erase"></span>
      <span class="icon icon-chart-pie"></span>
      <span class="icon icon-chart-line"></span>
      <span class="icon icon-chart-bar"></span>
      <span class="icon icon-chart-area"></span>
      <span class="icon icon-tape"></span>
      <span class="icon icon-graduation-cap"></span>
      <span class="icon icon-language"></span>
      <span class="icon icon-ticket"></span>
      <span class="icon icon-water"></span>
      <span class="icon icon-droplet"></span>
      <span class="icon icon-air"></span>
      <span class="icon icon-credit-card"></span>
      <span class="icon icon-floppy"></span>
      <span class="icon icon-clipboard"></span>
      <span class="icon icon-megaphone"></span>
      <span class="icon icon-database"></span>
      <span class="icon icon-drive"></span>
      <span class="icon icon-bucket"></span>
      <span class="icon icon-thermometer"></span>
      <span class="icon icon-key"></span>
      <span class="icon icon-flow-cascade"></span>
      <span class="icon icon-flow-branch"></span>
      <span class="icon icon-flow-tree"></span>
      <span class="icon icon-flow-line"></span>
      <span class="icon icon-flow-parallel"></span>
      <span class="icon icon-rocket"></span>
      <span class="icon icon-gauge"></span>
      <span class="icon icon-traffic-cone"></span>
      <span class="icon icon-cc"></span>
      <span class="icon icon-cc-by"></span>
      <span class="icon icon-cc-nc"></span>
      <span class="icon icon-cc-nc-eu"></span>
      <span class="icon icon-cc-nc-jp"></span>
      <span class="icon icon-cc-sa"></span>
      <span class="icon icon-cc-nd"></span>
      <span class="icon icon-cc-pd"></span>
      <span class="icon icon-cc-zero"></span>
      <span class="icon icon-cc-share"></span>
      <span class="icon icon-cc-remix"></span>
      <span class="icon icon-github"></span>
      <span class="icon icon-github-circled"></span>
      <span class="icon icon-flickr"></span>
      <span class="icon icon-flickr-circled"></span>
      <span class="icon icon-vimeo"></span>
      <span class="icon icon-vimeo-circled"></span>
      <span class="icon icon-twitter"></span>
      <span class="icon icon-twitter-circled"></span>
      <span class="icon icon-facebook"></span>
      <span class="icon icon-facebook-circled"></span>
      <span class="icon icon-facebook-squared"></span>
      <span class="icon icon-gplus"></span>
      <span class="icon icon-gplus-circled"></span>
      <span class="icon icon-pinterest"></span>
      <span class="icon icon-pinterest-circled"></span>
      <span class="icon icon-tumblr"></span>
      <span class="icon icon-tumblr-circled"></span>
      <span class="icon icon-linkedin"></span>
      <span class="icon icon-linkedin-circled"></span>
      <span class="icon icon-dribbble"></span>
      <span class="icon icon-dribbble-circled"></span>
      <span class="icon icon-stumbleupon"></span>
      <span class="icon icon-stumbleupon-circled"></span>
      <span class="icon icon-lastfm"></span>
      <span class="icon icon-lastfm-circled"></span>
      <span class="icon icon-rdio"></span>
      <span class="icon icon-rdio-circled"></span>
      <span class="icon icon-spotify"></span>
      <span class="icon icon-spotify-circled"></span>
      <span class="icon icon-qq"></span>
      <span class="icon icon-instagram"></span>
      <span class="icon icon-dropbox"></span>
      <span class="icon icon-evernote"></span>
      <span class="icon icon-flattr"></span>
      <span class="icon icon-skype"></span>
      <span class="icon icon-skype-circled"></span>
      <span class="icon icon-renren"></span>
      <span class="icon icon-sina-weibo"></span>
      <span class="icon icon-paypal"></span>
      <span class="icon icon-picasa"></span>
      <span class="icon icon-soundcloud"></span>
      <span class="icon icon-mixi"></span>
      <span class="icon icon-behance"></span>
      <span class="icon icon-google-circles"></span>
      <span class="icon icon-vkontakte"></span>
      <span class="icon icon-smashing"></span>
      <span class="icon icon-sweden"></span>
      <span class="icon icon-db-shape"></span>
      <span class="icon icon-logo-db"></span>
    </div>
  </body>
</html>
